<template>
  <div class="box">
    <div class="left" />
    <div class="resize" title="收缩侧边栏">⋮</div>
    <div class="mid" />
  </div>
</template>

<script>
export default {
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    dragControllerDiv: function () {
      const resize = document.getElementsByClassName("resize")[0];
      const left = document.getElementsByClassName("left")[0];
      const mid = document.getElementsByClassName("mid")[0];
      const box = document.getElementsByClassName("box")[0];
      // 鼠标按下事件
      resize.onmousedown = function (e) {
        const startX = e.clientX;
        const resizeLeft = resize.offsetLeft;
        // 鼠标拖动事件
        document.onmousemove = function (e) {
          const moveX = e.clientX;
          let moveLen = resizeLeft + (moveX - startX);
          const maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
          moveLen = moveLen < 32 ? 32 : moveLen; //左边区域最小宽度为32px
          moveLen = moveLen > maxT - 150 ? maxT - 150 : moveLen; //右边区域最小宽度为150px
          left.style.width = moveLen + "px";
          mid.style.left = moveLen + "px";
          resize.style.left = moveLen - 5 + "px";
        };
        // 鼠标松开事件
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    },
  },
};
</script>

<style scoped>
/*左侧div样式*/
.left {
  position: absolute;
  width: 200px;
  left: 0;
  top: 55px;
  bottom: 0;
  background: palevioletred;
}

/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  position: absolute;
  left: 195px;
  top: calc(50% - 23px);
  line-height: 100px;
  text-align: center;
  background: #666666;
  border-radius: 5px;
  width: 10px;
  z-index: 1;
}

/*拖拽区鼠标悬停样式*/
.resize:hover {
  background: #333333;
}

/*右侧div'样式*/
.mid {
  position: absolute;
  left: 200px;
  right: 0;
  top: 55px;
  bottom: 0;
  background: peru;
}
</style>
